/**
 * Created with JetBrains WebStorm.
 * User: thaidoanhong
 * Date: 3/25/13
 * Time: 8:54 PM
 * To change this template use File | Settings | File Templates.
 */
var MyElement = Class.create({
    initialize: function(o){
        this.className = "";
        //o --> {parent||parentDivTag}
        //parent: MyPage
        //parentDivTag
        this.attributeList = new MyAttributeList(this);

        var _o = o || {};

        this.parent = _o.parent || null;

        this.id = "";

        this.divTag = new Element('div');
        $(this.divTag).setStyle({position: "absolute" });
        $j(this.divTag).css("-ms-touch-action", "none");


        if(this.parent !== null){
            $(this.parent.divTag).insert(this.divTag);
        }
        else if(_o.parentDivTag !== undefined){
            $(_o.parentDivTag).insert(this.divTag);
        }
    },
    initAttributeList: function(o){
        var _this = this;


        $j.each(o.element, function(){
            if(this.type == "id"){
                _this.id = this.value;
                $(_this.divTag).writeAttribute(this.key, this.value);
                _this.attributeList.add(new MyAttribute(this));
            }
            else if(this.type == "css"){
                _this.attributeList.add(new MyAttribute(this));

                var sty = new Object();
                sty[this.key] = this.value;
                $(_this.divTag).setStyle(sty);
            }
            else if(this.type == "onActivate"){
                _this.attributeList.add(new MyAttribute(this));
            }
        });
    },
    reloadAttributeList: function(o){
        var _this = this;
        _this.attributeList.clear();

        $j.each(o.element, function(){
            if(this.type == "id"){
                _this.id = this.value;
                $(_this.divTag).writeAttribute(this.key, this.value);
                _this.attributeList.add(new MyAttribute(this));
            }
            else if(this.type == "css"){
                _this.attributeList.add(new MyAttribute(this));

                var sty = new Object();
                sty[this.key] = this.value;
                $(_this.divTag).setStyle(sty);
            }
            else if(this.type == "onActivate"){
                _this.attributeList.add(new MyAttribute(this));
            }
        });
    },
    initEvents: function(){
        var newImage = this;
        //The hien cac thuoc tinh cua image len tren editor
        $j("#" + newImage.id).on("click", function(event){
            event.stopPropagation();
            Global.propertyEditor.load(newImage);
            if(newImage.id != Global.currentSelectedEle){
                // them border select vao element
                $j("#" + newImage.id).addClass("resource-selected");
                // xoa  border select tren element truoc do
                if(Global.currentSelectedEle != null){
                    $j("#" + Global.currentSelectedEle).removeClass("resource-selected");

                }
                // gan lai id cua element dang duoc select
                Global.currentSelectedEle = newImage.id;
                Global.elementsView.reload();
            }
        });

        $j("#" + newImage.id).draggable({containment: "parent",
            start: function(e, ui){
//                ui.position.left = 0;
//                ui.position.top = 0;
                Global.propertyEditor.load(newImage);
            },
            drag: function(e, ui){
                Global.propertyEditor.load(newImage);
            },
            stop: function(e, ui){
                newImage.refreshAttributeList();
                //Global.propertyEditor.reload1();
            }});

        $j("#" + newImage.id).resizable({containment: "parent",
            autoHide: true,
            start: function(e, ui){
                Global.propertyEditor.load(newImage);
            },
            resize: function(e, ui){
                Global.propertyEditor.load(newImage);
            },
            stop: function(e, ui){
                newImage.refreshAttributeList();
                //Global.propertyEditor.reload1();
            }});
    },
    getValueFromKey: function(key){
        var att = this.attributeList.getAttributeFromKey(key);
        if(att !== null){
            if(att.type == "css"){
                return $j(this.divTag).css(att.key);
            }
            else{
                return att.value;
            }

        }
        return null;
    },
    getValueFromName: function(name){
        var att = this.attributeList.getAttributeFromName(name);
        if(att !== null){
            if(att.type == "css"){
                return $j(this.divTag).css(att.key);
            }
            else{
                return att.value;
            }

        }
        return null;
    },
    setValueByKey: function(key, value){
        var att = this.attributeList.getAttributeFromKey(key);
        if(att !== null){
            var matched = false;

            if(att.type == "id"){
                this.id = value;
                $(this.divTag).writeAttribute(att.key, value);
                matched = true;
            }
            else if(att.type == "css"){
                $j(this.divTag).css(att.key, value);
                matched = true;
            }
            if(matched){
                this.attributeList.setValueByKey(key, value);
                return true;
            }
        }
        return false;
    },
    setValueByName: function(name, value){
        var att = this.attributeList.getAttributeFromName(name);
        if(att !== null){
            var matched = false;

            if(att.type == "id"){
                this.id = value;
                $(this.divTag).writeAttribute(att.key, value);
                matched = true;
            }
            else if(att.type == "css"){
                $j(this.divTag).css(att.key, value);
                matched = true;
            }
            if(matched){
                this.attributeList.setValueByName(name, value);
                return true;
            }
        }
        return false;
    },
    refreshAttributeList: function(){
        MyTools.viewThumbnail(this.parent.id);
        Global.undoRedo.pushUndoStack("ELEMENT_PROPERTY", this.toJSON());

        for(var i = 0 ; i < this.attributeList.attributes.length; i++){
            var att = this.attributeList.attributes[i];
            if(att.type == "css"){
                att.value = $j(this.divTag).css(att.key);
            }
        }
    },
    toJSON: function(){
        var jsondata = new Object();
        jsondata['element'] = this.attributeList.toDataObjectArray();
        jsondata['className'] = this.className;
        jsondata['id'] = this.id;
        jsondata['pageId'] = this.parent.id;
        return jsondata;
    }
});

